<template>
    <div class="background">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" size="medium">

            <el-form-item label="视频文件" prop="videoUrl">
                <FileUpload></FileUpload>
            </el-form-item>

            <el-form-item label="视频封面" prop="videoCover">
                <el-upload class="uploadPic" action="#" :before-upload="beforeUploadPic" :show-file-list="false" drag>
                    <img v-if="ruleForm.videoCover" :src="downloadUrl + ruleForm.videoCover" class="avatar">
                    <el-button v-else class="uploadButton" type="primary" size="medium">上传封面</el-button>
                </el-upload>
            </el-form-item>

            <el-form-item label="视频标题" prop="videoTitle" class="videoTitle">
                <el-input v-model="ruleForm.videoTitle" placeholder="【剪辑类型】+ 主要标题"></el-input>
            </el-form-item>

            <el-form-item label="视频类型" prop="videoType">
                <el-radio-group v-model="ruleForm.videoType">
                    <!-- <el-radio label="原创" value="0"></el-radio>
                <el-radio label="转载" value="1"></el-radio> -->
                    <el-radio label="0">原创</el-radio>
                    <el-radio label="1">转载</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="视频分区" prop="videoPartition">
                <el-select v-model="ruleForm.videoPartition" placeholder="请选择视频分区">
                    <el-option v-for="(item, i) in videoPartition" :key="i" :label="item.name"
                        :value="item.partition"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="视频简介" prop="videoIntroduction">
                <el-input type="textarea" v-model="ruleForm.videoIntroduction"
                    placeholder="填写更全面的相关信息，让更多的人能找到你的视频吧"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即投稿</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { uploadPic } from "@/api/tool/file";
import { addVideo } from "@/api/video/video";

import FileUpload from "./FileUpload.vue";
import Bus from "@/utils/bus";

export default {
    name: "Publish",
    components: {
        FileUpload,
    },
    data() {
        return {
            formData: {
                file: "",
                type: "",
            },
            downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
            ruleForm: {
                userId: '',
                videoUrl: '',
                videoCover: '',
                videoTitle: '',
                videoType: '',
                videoPartition: "",
                videoIntroduction: '',
            },
            rules: {
                videoUrl: [
                    { required: true, message: '请上传视频', trigger: 'change' }
                ],
                videoCover: [
                    { required: true, message: '请上传视频封面', trigger: 'change' }
                ],
                videoTitle: [
                    { required: true, message: '请填写视频标题', trigger: 'blur' },
                    { max: 80, message: '长度不超过 80 个字符', trigger: 'blur' }
                ],
                videoIntroduction: [
                    { max: 250, message: '长度不超过 250 个字符', trigger: 'blur' }
                ],
                videoType: [
                    { required: true, message: '请选择视频类型', trigger: 'change' }
                ],
                videoPartition: [
                    { required: true, message: '请选择视频分区', trigger: 'change' }
                ],
            },
            videoPartition: [
                {
                    "partition": "animation",
                    "name": "动画区"
                },
                {
                    "partition": "music",
                    "name": "音乐区"
                },
                {
                    "partition": "game",
                    "name": "游戏区"
                },
                {
                    "partition": "dance",
                    "name": "舞蹈区"
                },
                {
                    "partition": "fashion",
                    "name": "时尚区"
                },
            ],
        }
    },

    created() {
        Bus.$on('hasVideoUpload', msg => {
            this.ruleForm.videoUrl = msg;
        })
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addVideo(this.ruleForm).then((res) => {
                        console.log(res);
                        this.$message.success("上传视频成功！");
                        this.resetForm('ruleForm');
                    });
                } else {
                    this.$message.warning("请完善视频信息！" + res.data.msg);
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            Bus.$emit("resetForm", 1);
        },

        // 文件上传之前,el-upload自动触发
        beforeUploadPic(file) {
            console.log(file)
            if (file.size > 10 * 1024 * 1024) {
                this.$message.warning("封面大小不能超过10M");
                return 0;
            }
            // var suffix = file.name.substring(file.name.lastIndexOf("."));
            if (file.type.indexOf("image/") == -1) {
                this.$message.warning('文件格式错误！请上传图片类型,如：.jpg .png .jpeg .gif 后缀的文件!');
                return 0;
            }
            let form = new FormData();
            form.append("file", file);
            form.append("type", 1);
            uploadPic(form).then((res) => {
                console.log(res);
                this.ruleForm.videoCover = res.data.data;
            });
        },
        goBack() {
            this.$router.go(-1);
        },
    },
}

</script>
  
<style scoped>
.background {
    background-image: url("../../assets/theme/bizhi5.jpg");
    background-size: cover;
    /* background-repeat: no-repeat; */
    background-position: center;
    animation: run 60s linear infinite;
    overflow: hidden;
}

@keyframes run {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -1000px;
    }
}

.ruleForm {
    margin: 30px;
    width: 800px;
    border: 2px solid rgba(105, 105, 105, 0.2);
    background-color: rgba(255, 255, 255, 0.8);
}

.videoTitle {
    width: 650px;
}

.avatar {
    width: 300px;
}

.el-icon-plus {
    margin-top: 80px;
}

.uploadButton {
    line-height: 30px;
    position: absolute;
    top: 40%;
    left: 35%;
}
</style>